<template>
	<view class="ad-box">
		<!-- 类型1 -->
		<image 
		class="ad-type1"
		v-if="adObj.ad_type == 1" 
		:src="pathUrl + adObj.img1"></image>
		<!-- 类型2 -->
		<view class="ad-type2" v-if="adObj.ad_type == 2" >
			<image
			class="image type-left"
			:src="pathUrl + adObj.img1"></image>
			<image
			class="image type-right"
			:src="pathUrl + adObj.img2"></image>
		</view>
		<!-- 类型3 -->
		<view class="ad-type3" v-if="adObj.ad_type == 3" >
			<view class="left">
				<image
				class="image"
				:src="pathUrl + adObj.img1"></image>
				<image
				class="image"
				:src="pathUrl + adObj.img2"></image>
			</view>
			<view class="right">
				<image
				class="image"
				:src="pathUrl + adObj.img3"></image>
			</view>
		</view>
		<!-- 类型4 -->
		<view class="ad-type4" v-if="adObj.ad_type == 4" >
			<view class="left">
				<image
				class="image"
				:src="pathUrl + adObj.img1"></image>
			</view>
			<view class="right">
				<image
				class="image"
				:src="pathUrl + adObj.img2"></image>
				<image
				class="image"
				:src="pathUrl + adObj.img3"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			adObj: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		data() {
			return {
				pathUrl: this.$pathUrl
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ad-box {
		padding: 20rpx 0;
		.ad-type1 {
			width: 100%;
			height: 200rpx;
			border-radius: 10rpx;
		}
		.ad-type2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex: 1;
			.image {
				width: 100%;
				height: 200rpx;
				border-radius: 10rpx;
			}
			.type-left {
				margin-right: 5rpx;
			}
			.type-right {
				margin-left: 5rpx;
			}
		}
		.ad-type3 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				height: 200rpx;
				flex: 1;
				margin-right: 10rpx;
				.image {
					width: 100%;
					height: 95rpx;
					border-radius: 6rpx;
				}
			}
			.right {
				height: 200rpx;
				flex: 1;
				.image {
					width: 100%;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}
		}
		.ad-type4 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left {
				height: 200rpx;
				flex: 1;
				.image {
					width: 100%;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}
			.right {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				height: 200rpx;
				flex: 1;
				margin-left: 10rpx;
				.image {
					width: 100%;
					height: 95rpx;
					border-radius: 6rpx;
				}
			}
		}
	}
</style>